<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OUIF : CSS Selector Rules</title>
<link rel="stylesheet" type="text/css" href="../com/css/framework.css"/>
<link rel="stylesheet" type="text/css" href="../com/css/default.css"/>
<style type="text/css">
th, td{ vertical-align:top;}
</style>
</head>
<body>
<div id="ouif">
	<div id="container">
		<div id="header">
			<h1>CSS Selector Rules &gt; Naming Guide</h1>
		</div>
		<hr />
		<div id="body">
			<div id="content">
				<h2>Naming Rule</h2>
				<ol>
					<li>되도록 예약된 선택자 이름을 사용 합니다.</li>
					<li>알파벳과 숫자를 사용하고 카멜 케이스만 사용 합니다.</li>
					<li>숫자는 첫 글자로 등장할 수 없습니다.</li>
				</ol>
				<h2>Reserved Selector</h2>
				<table cellspacing="0" border="1">
					<tbody>
						<tr>
							<th scope="col">&nbsp;</th>
							<th scope="col">Selector</th>
							<th scope="col">Description</th>
						</tr>
						<tr>
							<th rowspan="8" scope="row">ID</th>
							<th scope="row">#root</th>
							<td>root container</td>
						</tr>
						<tr>
							<th scope="row">#xe</th>
							<td>xpress engine</td>
						</tr>
						<tr>
							<th scope="row">#container</th>
							<td>container for whole content block </td>
						</tr>
						<tr>
							<th scope="row">#header</th>
							<td>header container</td>
						</tr>
						<tr>
							<th scope="row">#footer</th>
							<td>footer container</td>
						</tr>
						<tr>
							<th scope="row">#body</th>
							<td>body container</td>
						</tr>
						<tr>
							<th scope="row">#content</th>
							<td>main content (#body&gt;#content)</td>
						</tr>
						<tr>
							<th scope="row">#aside</th>
							<td>aside content (#body&gt;#aside)</td>
						</tr>
						<tr>
							<th rowspan="8" scope="row">A</th>
							<th scope="row">.active</th>
							<td>active</td>
						</tr>
						<tr>
							<th scope="row">.ad</th>
							<td>advertisement</td>
						</tr>
						<tr>
							<th scope="row">.aLeft</th>
							<td>align left</td>
						</tr>
						<tr>
							<th scope="row">.aRight</th>
							<td>align right</td>
						</tr>
						<tr>
							<th scope="row">.arrow</th>
							<td>arrow</td>
						</tr>
						<tr>
							<th scope="row">.article</th>
							<td>article  containing heading element</td>
						</tr>
						<tr>
							<th scope="row">.aside</th>
							<td>aside </td>
						</tr>
						<tr>
							<th scope="row">.author</th>
							<td>author</td>
						</tr>
						<tr>
							<th rowspan="3" scope="row">B</th>
							<th scope="row">.bottom</th>
							<td>bottom</td>
						</tr>
						<tr>
							<th scope="row">.btn</th>
							<td>button</td>
						</tr>
						<tr>
							<th scope="row">.btnArea</th>
							<td>button area</td>
						</tr>
						<tr>
							<th rowspan="4" scope="row">C</th>
							<th scope="row">.cancel</th>
							<td>cancel</td>
						</tr>
						<tr>
							<th scope="row">.center</th>
							<td>center</td>
						</tr>
						<tr>
							<th scope="row">.close</th>
							<td>close</td>
						</tr>
						<tr>
							<th scope="row">.confirm</th>
							<td>confirm</td>
						</tr>
						<tr>
							<th rowspan="4" scope="row">D</th>
							<th scope="row">.delete</th>
							<td>delete</td>
						</tr>
						<tr>
							<th scope="row">.desc</th>
							<td>description</td>
						</tr>
						<tr>
							<th scope="row">.down</th>
							<td>down</td>
						</tr>
						<tr>
							<th scope="row">.download</th>
							<td>download</td>
						</tr>
						<tr>
							<th rowspan="2" scope="row">E</th>
							<th scope="row">.edit</th>
							<td>edit</td>
						</tr>
						<tr>
							<th scope="row">.even</th>
							<td>even</td>
						</tr>
						<tr>
							<th rowspan="5" scope="row">F</th>
							<th scope="row">.file</th>
							<td>file</td>
						</tr>
						<tr>
							<th scope="row">.find</th>
							<td>find</td>
						</tr>
						<tr>
							<th scope="row">.first</th>
							<td>first</td>
						</tr>
						<tr>
							<th scope="row">.fLeft</th>
							<td>float left</td>
						</tr>
						<tr>
							<th scope="row">.fRight</th>
							<td>float right</td>
						</tr>
						<tr>
							<th rowspan="2" scope="row">G</th>
							<th scope="row">.gnb</th>
							<td>global navigation bar</td>
						</tr>
						<tr>
							<th scope="row">.go</th>
							<td>go</td>
						</tr>
						<tr>
							<th rowspan="3" scope="row">H</th>
							<th scope="row">.h</th>
							<td>heading</td>
						</tr>
						<tr>
							<th scope="row">.hide</th>
							<td>hide</td>
						</tr>
						<tr>
							<th scope="row">.hr</th>
							<td>horizontal rule</td>
						</tr>
						<tr>
							<th rowspan="6" scope="row">I</th>
							<th scope="row">.icon</th>
							<td>icon</td>
						</tr>
						<tr>
							<th scope="row">.iCheck</th>
							<td>checkbox input control</td>
						</tr>
						<tr>
							<th scope="row">.img</th>
							<td>image</td>
						</tr>
						<tr>
							<th scope="row">.install</th>
							<td>install</td>
						</tr>
						<tr>
							<th scope="row">.iRadio</th>
							<td>radio input control</td>
						</tr>
						<tr>
							<th scope="row">.iText</th>
							<td>text input control</td>
						</tr>
						<tr>
							<th rowspan="5" scope="row">L</th>
							<th scope="row">.last</th>
							<td>last</td>
						</tr>
						<tr>
							<th scope="row">.lb</th>
							<td>left bottom</td>
						</tr>
						<tr>
							<th scope="row">.list</th>
							<td>list</td>
						</tr>
						<tr>
							<th scope="row">.lnb</th>
							<td>local navigation bar</td>
						</tr>
						<tr>
							<th scope="row">.lt</th>
							<td>left top</td>
						</tr>
						<tr>
							<th rowspan="3" scope="row">M</th>
							<th scope="row">.middle</th>
							<td>middle</td>
						</tr>
						<tr>
							<th scope="row">.more</th>
							<td>more</td>
						</tr>
						<tr>
							<th scope="row">.movie</th>
							<td>movie</td>
						</tr>
						<tr>
							<th rowspan="5" scope="row">N</th>
							<th scope="row">.nav</th>
							<td>navigation</td>
						</tr>
						<tr>
							<th scope="row">.new</th>
							<td>new</td>
						</tr>
						<tr>
							<th scope="row">.next</th>
							<td>next</td>
						</tr>
						<tr>
							<th scope="row">.noti</th>
							<td>notification</td>
						</tr>
						<tr>
							<th scope="row">.num</th>
							<td>num</td>
						</tr>
						<tr>
							<th scope="row">M</th>
							<th scope="row">.mw</th>
							<td>modal window</td>
						</tr>
						<tr>
							<th rowspan="4" scope="row">O</th>
							<th scope="row">.odd</th>
							<td>odd</td>
						</tr>
						<tr>
							<th scope="row">.off</th>
							<td>off</td>
						</tr>
						<tr>
							<th scope="row">.on</th>
							<td>on</td>
						</tr>
						<tr>
							<th scope="row">.open</th>
							<td>open</td>
						</tr>
						<tr>
							<th rowspan="6" scope="row">P</th>
							<th scope="row">.pagination</th>
							<td>page navigation</td>
						</tr>
						<tr>
							<th scope="row">.path</th>
							<td>path </td>
						</tr>
						<tr>
							<th scope="row">.permit</th>
							<td>permit</td>
						</tr>
						<tr>
							<th scope="row">.photo</th>
							<td>photo</td>
						</tr>
						<tr>
							<th scope="row">.play</th>
							<td>play</td>
						</tr>
						<tr>
							<th scope="row">.prev</th>
							<td>previous</td>
						</tr>
						<tr>
							<th rowspan="6" scope="row">R</th>
							<th scope="row">.rb</th>
							<td>right bottom</td>
						</tr>
						<tr>
							<th scope="row">.read</th>
							<td>read</td>
						</tr>
						<tr>
							<th scope="row">.refresh</th>
							<td>refresh</td>
						</tr>
						<tr>
							<th scope="row">.regist</th>
							<td>registration</td>
						</tr>
						<tr>
							<th scope="row">.reply</th>
							<td>reply</td>
						</tr>
						<tr>
							<th scope="row">.rt</th>
							<td>right top</td>
						</tr>
						<tr>
							<th rowspan="6" scope="row">S</th>
							<th scope="row">.search</th>
							<td>search</td>
						</tr>
						<tr>
							<th scope="row">.section</th>
							<td>section  containing heading element</td>
						</tr>
						<tr>
							<th scope="row">.show</th>
							<td>show</td>
						</tr>
						<tr>
							<th scope="row">.snb</th>
							<td>side navigation bar</td>
						</tr>
						<tr>
							<th scope="row">.stop</th>
							<td>stop</td>
						</tr>
						<tr>
							<th scope="row">.submit</th>
							<td>submit</td>
						</tr>
						<tr>
							<th rowspan="4" scope="row">T</th>
							<th scope="row">.tab</th>
							<td>tab</td>
						</tr>
						<tr>
							<th scope="row">.temp</th>
							<td>temporary</td>
						</tr>
						<tr>
							<th scope="row">.thumb</th>
							<td>thumbnail</td>
						</tr>
						<tr>
							<th scope="row">.top</th>
							<td>top</td>
						</tr>
						<tr>
							<th rowspan="3" scope="row">U</th>
							<th scope="row">.up</th>
							<td>up</td>
						</tr>
						<tr>
							<th scope="row">.update</th>
							<td>update</td>
						</tr>
						<tr>
							<th scope="row">.upload</th>
							<td>upload</td>
						</tr>
						<tr>
							<th scope="row">V</th>
							<th scope="row">.vr</th>
							<td>vertical rule</td>
						</tr>
						<tr>
							<th scope="row">W</th>
							<th scope="row">.write</th>
							<td>write</td>
						</tr>
						<tr>
							<th rowspan="2" scope="row">Z</th>
							<th scope="row">.zIn</th>
							<td>zoom in</td>
						</tr>
						<tr>
							<th scope="row">.zOut</th>
							<td>zoom out</td>
						</tr>
					</tbody>
				</table>
				<h2>ID Selector Usage Guide</h2>
				<ul>
					<li>#root | #xe
						<ul>
							<li>#container
								<ul>
									<li>#header
										<ul>
											<li>h1.h</li>
										</ul>
									</li>
									<li>#body
										<ul>
											<li>#content
												<ul>
													<li>.section
														<ul>
															<li>h1.h </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>#footer</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<hr />
		<div id="footer">
			<abbr title="Open User Interface Framework">OUIF</abbr>
		</div>
	</div>
</div>
</body>
</html>
